import * as React from 'react';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';

export default function LinearBuffer(props) {
  // const [progress, setProgress] = React.useState(0);
  // const [buffer, setBuffer] = React.useState(10);

  // const progressRef = React.useRef(() => {});
  // React.useEffect(() => {
  //   progressRef.current = () => {
  //     if (progress > 100) {
  //       setProgress(0);
  //       setBuffer(10);
  //     } else {
  //       const diff = Math.random() * 10;
  //       const diff2 = Math.random() * 10;
  //       setProgress(progress + diff);
  //       setBuffer(progress + diff + diff2);
  //     }
  //   };
  // });

  // React.useEffect(() => {
  //   const timer = setInterval(() => {
  //     progressRef.current();
  //   }, 500);

  //   return () => {
  //     clearInterval(timer);
  //   };
  // }, []);
  const [state, setState] = React.useState({ hidden: true, p: 0 });
  React.useEffect(() => {
    if (props.status === '') {
    } else if (props.status === 'start') {
      setState((state) => ({ ...state, hidden: false, p: 25 }));
    } else {
      if ((state.p = 25)) {
        setState((state) => ({ ...state, p: 100 }));
        setTimeout(() => {
          setState({ p: 0, hidden: true });
        }, 500);
      }
    }
  }, [props.status]);
  // console.log("Progess")
  // console.log(props)
  return (
    <Box sx={{ width: '100%' }} style={{
            display: state.hidden ? 'none' : 'inline',
          }}>
      <LinearProgress  value={state.p}  />
    </Box>
  );
}